<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="./utils/myRequest.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				var user = store.getItem();
				// plus.nativeUI.toast(user.nickname);
				//加载多个页面
				var pages = ["message.html", "friends.html", "find.html", "my.html"];
				//获取当前页对象
				var currentPage = plus.webview.currentWebview();
				//遍历数组
				for (var i = 0; i < pages.length; i++) {
					//创建多个子页面
					var page = plus.webview.create(pages[i], pages[i], {
						top: '0px',
						bottom: '50px'
					});
					//将多个子页面添加到当前页面中
					currentPage.append(page);

					//默认进来只显示第一张图片
					if (i != 0) {
						page.hide();
					}
				}

				mui(".mui-bar-tab").on('tap', '.mui-tab-item', function() {
					//获取id
					var id = this.getAttribute("id");
					//通过id查询数组上的元素
					var page = pages[id];
					//点击加载对应的页面
					plus.webview.getWebviewById(page).show();
				});

				var username = user.nickname;
				var webSocket;
				if ("WebSocket" in window) {
					webSocket = new WebSocket("ws://192.168.2.216:8160/friend/" + username);
					webSocket.onopen = function() {
						console.log("websocket建立连接");
					}
					//接收后台服务端的消息
					webSocket.onmessage = function(evt) {
						var receive_msg = evt.data;
						console.log("接收后台服务端的消息: " + evt.data);
						var obj = JSON.parse(receive_msg);
						console.log("解析后台服务端的消息: " + obj);
						
					}
					//连接关闭的回调事件
					webSocket.onclose = function() {
						console.log("与websocket连接已关闭!! ");

						// setMessageInnerHTML("与websocket连接已关闭!! ")
					}
				} else {
					alert("浏览器不支持WebSocket!! ");
				}
			

			});
		</script>
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="0" style="touch-action: none;">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">信息</span>
			</a>
			<a class="mui-tab-item" id="1" style="touch-action: none;">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">好友</span>
			</a>
			<a class="mui-tab-item" id="2" style="touch-action: none;">
				<span class="mui-icon mui-icon-pengyouquan"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" id="3" style="touch-action: none;">
				<span class="mui-icon mui-icon-personadd"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
</html>
